<template>
  <div class="community-bg">
    <!-- 顶部渐变彩条装饰 -->
    <div class="top-gradient-bar"></div>
    <div class="community-main">
      <!-- 顶部用户信息、定位、私信按钮 -->
      <div class="user-info-sporty">
        <div class="avatar-wrap">
          <img :src="userStore.avatar" class="avatar-sporty" />
        </div>
        <div class="user-meta">
          <div class="nickname-sporty" style="color:#222; background:none; -webkit-text-fill-color:unset; font-weight:bold;">{{ userStore.nickname }}</div>
          <div class="location-sporty" @click="goToMap" style="cursor:pointer;">
            <span class="icon-location">🏃‍♂️</span>{{ userStore.location }}
          </div>
        </div>
        <button @click="$router.push('/chat')" class="msg-btn-sporty" title="私信">
          <span style="font-size:1.3em;">✉️</span>
        </button>
      </div>
      <!-- 每日激励语提前到tab栏和搜索框上方 -->
      <div class="motivation-quote">“每一次坚持，都是对自己的超越！”</div>
      <!-- 分类tab和搜索框同一行 -->
      <div class="tabs-search-row">
        <div class="community-tabs">
          <div
            :class="['tab-btn', { 'tab-active': activeTab === 'community' }]"
            @click="switchTab('community')"
          >社区</div>
          <div
            :class="['tab-btn', { 'tab-active': activeTab === 'recommend' }]"
            @click="switchTab('recommend')"
          >推荐</div>
          <div
            :class="['tab-btn', { 'tab-active': activeTab === 'course' }]"
            @click="switchTab('course')"
          >课程</div>
        </div>
        <div class="search-bar-apple" style="position:relative;">
          <el-input
            v-model="searchText"
            placeholder="搜索"
            class="user-search-apple"
            size="large"
            @focus="onInputFocus"
            @keyup.enter="onSearch"
            clearable
            :style="{ border: 'none', boxShadow: 'none' }"
            @input="showSuggest = true"
            @blur="setTimeout(()=>showSuggest=false,200)"
          >
            <template #append>
              <el-button class="search-btn-apple" @click="onSearch">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style="vertical-align:middle;margin-right:4px;"><circle cx="11" cy="11" r="7" stroke="#409eff" stroke-width="2"/><line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#409eff" stroke-width="2" stroke-linecap="round"/></svg>
                搜索
              </el-button>
            </template>
          </el-input>
          <div v-if="showSuggest" class="suggest-dropdown">
            <div
              v-for="item in suggestList"
              :key="item.type + '-' + item.id"
              class="suggest-item"
              @mousedown.prevent="onSelectSuggest(item)"
            >
              <span v-if="item.type==='product'">🛒</span>
              <span v-else-if="item.type==='course'">📚</span>
              <span v-else>👤</span>
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <!-- 彩色分割线 -->
      <div class="color-divider"></div>
      <!-- 内容区：缓存Tab内容，切换不丢失 -->
      <keep-alive>
        <component :is="currentTabComponent" />
      </keep-alive>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { Location, Message } from '@element-plus/icons-vue'
import Community from '@/views/Community.vue'
import Recommend from '@/views/Recommend.vue'
import Course from '@/views/Course.vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { ElNotification } from 'element-plus'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const activeTab = ref((route && route.query && route.query.tab) || 'community')
const searchText = ref('')

// 推荐下拉相关
const showSuggest = ref(false)
const suggestList = ref([])

watch(searchText, async (val) => {
  if (val.trim()) {
    try {
      // 调用联想推荐接口
      const res = await request.get('/api/search/suggestions/', { params: { q: val } })
      suggestList.value = (res.data || []).map(item => ({
        ...item,
        type: item.type || 'product'
      }))
      showSuggest.value = suggestList.value.length > 0
    } catch (e) {
      showSuggest.value = false
      suggestList.value = []
    }
  } else {
    showSuggest.value = false
    suggestList.value = []
  }
})

function onSelectSuggest(item) {
  if (item.type === 'product') {
    router.push(`/shop/${item.id}`)
  } else {
    router.push({ path: '/search', query: { q: item.name } })
  }
  showSuggest.value = false
}

function switchTab(tab) {
  activeTab.value = tab
  router.replace({ path: '/home', query: { tab } })
}

watch(
  () => (route && route.query ? route.query.tab : undefined),
  (val) => {
    if (val && val !== activeTab.value) activeTab.value = val
  }
)

const tabMap = {
  community: Community,
  recommend: Recommend,
  course: Course
}
const currentTabComponent = computed(() => tabMap[activeTab.value])

function onSearch() {
  if (!searchText.value.trim()) {
    ElMessage.warning('请输入搜索内容')
    return
  }
  // 跳转到/search页面并带上关键词参数
  router.push({ path: '/search', query: { q: searchText.value } })
}

function onInputFocus() {
  router.push('/search')
}

function goToMap() {
  router.push('/map')
}

onMounted(() => {
  const userid = localStorage.getItem('userid')
  if (userid) {
    userStore.fetchThirdPartyProfile(userid)
  }
})
</script>

<style scoped>
.community-bg {
  min-height: 100vh;
  background: url('/sports-bg.png') center center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.community-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0.65));
  backdrop-filter: blur(0px);
  z-index: 0;
}

.community-main {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 12px 40px 12px;
  border-radius: 32px;
  box-shadow: 0 8px 32px 0 rgba(44,62,80,0.12);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}
.top-gradient-bar {
  width: 100vw;
  height: 8px;
  background: linear-gradient(90deg, #00b96b 0%, #409eff 60%, #f7971e 100%);
  border-radius: 0 0 12px 12px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px #e0e7ef;
}
.user-info-sporty {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(79,140,255,0.95) 0%, rgba(255,179,71,0.95) 100%);
  border-radius: 18px;
  padding: 18px 28px;
  box-shadow: 0 4px 24px 0 rgba(79,140,255,0.15);
  margin-bottom: 18px;
}
.avatar-wrap {
  border: none;
  box-shadow: none;
  border-radius: 50%;
  padding: 0;
  margin-right: 18px;
}
.avatar-sporty {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
  box-shadow: none;
  border: none;
}
.user-meta {
  flex: 1;
}
.nickname-sporty {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #43e97b 0%, #409eff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.location-sporty {
  font-size: 1rem;
  color: #fff;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
  border-radius: 12px;
  padding: 2px 14px 2px 8px;
  box-shadow: 0 2px 8px 0 rgba(67,233,123,0.10);
  font-weight: 500;
  letter-spacing: 1px;
}
.icon-location {
  margin-right: 6px;
  font-size: 1.2em;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(67,233,123,0.18));
}
.msg-btn-sporty {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 2px 8px 0 rgba(67,233,123,0.18);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.msg-btn-sporty:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px 0 rgba(67,233,123,0.28);
}
.tabs-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 18px;
}
.community-tabs {
  flex: 1;
  display: flex;
  align-items: center;
}
.search-bar-apple {
  max-width: 320px;
  min-width: 180px;
  flex-shrink: 0;
  margin: 0;
}
.user-search-apple .el-input__wrapper {
  border-radius: 28px !important;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(44,62,80,0.08);
  border: none;
  padding-right: 0;
  min-height: 48px;
  font-size: 1.08rem;
  transition: box-shadow 0.2s;
}
.user-search-apple .el-input__inner {
  background: transparent;
  border: none;
  border-radius: 28px;
  font-size: 1.08rem;
  color: #222;
  height: 48px;
  line-height: 48px;
}
.user-search-apple .el-input-group__append {
  background: transparent;
  border: none;
  padding: 0;
}
.search-btn-apple {
  border-radius: 24px;
  background: #f5f6fa;
  color: #409eff;
  font-weight: 500;
  border: none;
  height: 40px;
  padding: 0 22px;
  font-size: 1.08rem;
  box-shadow: none;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}
.search-btn-apple:hover {
  background: #e6f0fd;
  color: #007aff;
}
.motivation-quote {
  text-align: center;
  font-size: 1.15rem;
  color: #409eff;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #e0e7ef 0%, #f7f7f7 100%);
  border-radius: 12px;
  padding: 8px 0 8px 0;
  box-shadow: 0 1px 4px #e0e7ef;
}
.color-divider {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #00b96b 0%, #409eff 60%, #f7971e 100%);
  border-radius: 2px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px #e0e7ef;
}
.tab-active {
  font-weight: bold;
  color: #00b96b;
  padding: 14px 32px;
  border-bottom: 4px solid #00b96b;
  background: #fff;
  border-radius: 0 0 0 22px;
  font-size: 18px;
  box-shadow: 0 2px 8px #e0e7ef;
  transition: color 0.2s, border-bottom 0.2s;
}
.tab-btn {
  background: none;
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  color: #333;
  font-size: 18px;
  border-radius: 0 0 22px 22px;
  transition: background 0.2s, color 0.2s;
}
.tab-btn:hover {
  background: #f7f7f7;
  color: #00b96b;
}
.suggest-dropdown {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px #eee;
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
}
.suggest-item {
  padding: 10px 18px;
  cursor: pointer;
  font-size: 15px;
}
.suggest-item:hover {
  background: #f5f7fa;
}
</style>
